// 入口函数
$(function () {
  // * 1. 登录与注册的切换
  $('#go-reg').click(function () {
    $('.login').hide()
    $('.reg').show()
  })
  $('#go-login').click(function () {
    $('.reg').hide()
    $('.login').show()
  })

  // * 2. 实现基础校验规则【用户名，密码、确认密码】 - layui【自带校验规则】 - 自定义校验规则
  // 2.1 获取自定义规则对象【表单中】
  const form = layui.form
  // 2.2 定义校验规则
  const rules = {
    // 用户名
    username: [/^[0-9a-zA-Z]{5,10}$/, '用户名必须为5-10位的数字或字母!'],
    // 密码
    password: [/^[\S]{6,12}$/, '密码必须为6-12, 并且不能为空格!'],
    // 确认密码【与密码框的值进行比较,不一致则校验失败】
    rpPassword: (value) => ($('#reg-password').val() !== value ? '两次输入的密码不一致!' : undefined)
  }
  // 2.3 注册自定义规则
  form.verify(rules)

  // 通过layui-获取弹窗对象
  const layer = layui.layer
  // * 3. 实现登录功能【表单的提交事件 -> 流程（先通过规则校验再触发提交）】
  $('.login .layui-form').submit(function (e) {
    // 3.1 获取表单数据【layui-> form对象.val()】
    const data = form.val('login-form') // layui的序列化表单数据

    // 3.2 发送ajax请求
    $.post('https://zhi.zeng.pub/big-event/api/login', data).then(res => {
      // 3.3 判断结果
      if (res.code !== 200) return layer.msg(res.msg || '登录失败')

      layer.msg('登录成功')
      // 3.4 存储登录凭证token【登录凭证是服务端校验 ->  是否登录的重要信息  ->  登录成功后 后续请求都携带凭证(请求头)】
      // localStorage 本地存储对象【永久】
      localStorage.setItem('BIG_EVENT_USER_TOKEN', res.data.user_Token)
      // 3.5 跳转到首页
      location.href = '../index.html'
    })

    return false
  })

  // * 4. 实现注册功能
  $('.reg .layui-form').submit(function (e) {
    // 4.1 获取表单数据【layui-> form对象.val()】
    const data = form.val('reg-form') // layui的序列化表单数据

    // 4.2 发送ajax请求  请求根地址: https://zhi.zeng.pub/big-event    /api/reguser
    $.post('https://zhi.zeng.pub/big-event/api/reguser', data).then(res => {
      // 4.3 判断结果
      if (res.code !== 200) return layer.msg(res.msg || '注册失败')

      layer.msg('注册成功')
      // 4.4 切换登录
      $('#go-login').trigger('click')
    })
    return false
  })
})
